.accordion-item {
  margin-bottom: 10px;
  border: 1px solid $gray-200;
  // border-radius: 5px;
  &.active {
    .accordion-title {
      &::after {
        transform: rotate(-180deg);
        transition: transform 0.2s ease-in-out;
      }
    }
    .accordion-content {
      height: auto;
    }
  }
  .accordion-title {
    display: flex;
    align-items: center;
    position: relative;
    height: 40px;
    margin: 0 !important;
    padding: 0 45px 0 30px;
    background: $gray-100;
    cursor: pointer;
    &::after {
      content: "";
      position: absolute;
      top: 0;
      right: 20px;
      color: #666;
      width: 1.25rem;
      height: 40px;
      line-height: 40px;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23555' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
      background-position: center center;
      background-repeat: no-repeat;
      transition: transform 0.2s ease-in-out;
    }
  }
  .accordion-content {
    overflow: hidden;
    transition: height 0.3s ease;
  }
  &:last-child {
    margin-bottom: 20px;
  }
}
